import { PolygonLayer,PointLayer, Scene } from '@antv/l7';
import { Map } from '@antv/l7-maps';
import React, { useEffect } from 'react';

export default () => {
  
  useEffect(() => {
    const scene = new Scene({
      id: 'map',
      map: new Map({
        pitch: 0,
        style: 'light',
        center: [118, 24.8],
        zoom: 6,
      }),
    });
    
    scene.on('loaded', async () => {

      scene.addImage(
        'province',
        'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*hvqeQa9I6ccAAAAAAAAAAAAADmJ7AQ/original'
      );
      scene.addImage(
        'city',
        'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*sBlgRp8Ah7sAAAAAAAAAAAAADmJ7AQ/original'
      );
      scene.addImage(
        'county',
        'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ufrWTqCNCScAAAAAAAAAAAAADmJ7AQ/original'
      );
    // 获取数据
    const dataList = [
        // 市级行政区
        'https://mdn.alipayobjects.com/afts/file/A*jPjCTad_s24AAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA.json',
        // 市级行政区一级群列岛名
        'https://mdn.alipayobjects.com/afts/file/A*HW8yQb2joA8AAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E4%B8%80%E7%BA%A7%E7%BE%A4%E5%88%97%E5%B2%9B%E5%90%8D.json',
        ///市级行政区一级河流名.json
        'https://mdn.alipayobjects.com/afts/file/A*EjtNRrENGToAAAAAAAAAAAAADrd2AQ/市级行政区一级河流名.json',
        //市级行政区一级港湾名.json
        'https://mdn.alipayobjects.com/afts/file/A*lqxATobbMLwAAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E4%B8%80%E7%BA%A7%E6%B8%AF%E6%B9%BE%E5%90%8D.json',
        //市级行政区一级岛屿名.json
        'https://mdn.alipayobjects.com/afts/file/A*xyeHRZCF8DsAAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E4%B8%80%E7%BA%A7%E5%B2%9B%E5%B1%BF%E5%90%8D.json',
        //市级行政区县级行政中心.json
        'https://mdn.alipayobjects.com/afts/file/A*vrDfSrB8J4sAAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E5%8E%BF%E7%BA%A7%E8%A1%8C%E6%94%BF%E4%B8%AD%E5%BF%83.json',
        //市级行政区县级行政区.json
        'https://mdn.alipayobjects.com/afts/file/A*lfffQ5ej7AEAAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E5%8E%BF%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA.json',
        // 市级行政区省级行政中心.json
        'https://mdn.alipayobjects.com/afts/file/A*jtlsTqxTJkoAAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E7%9C%81%E7%BA%A7%E8%A1%8C%E6%94%BF%E4%B8%AD%E5%BF%83.json',
        //市级行政区山峰.json
        'https://mdn.alipayobjects.com/afts/file/A*DRSfRqBs9qsAAAAAAAAAAAAADrd2AQ/市级行政区山峰.json',
        //市级行政区色带.json
        'https://mdn.alipayobjects.com/afts/file/A*KRD4QbjkZCMAAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E8%89%B2%E5%B8%A6.json',
        //市级行政区面状水域.json
        'https://mdn.alipayobjects.com/afts/file/A*3e9nSJwXqu0AAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E9%9D%A2%E7%8A%B6%E6%B0%B4%E5%9F%9F.json',
        //市级行政区境界线.json
        'https://mdn.alipayobjects.com/afts/file/A*tA8nSqhulQQAAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E5%A2%83%E7%95%8C%E7%BA%BF.json',
        //市级行政区河流.json
        'https://mdn.alipayobjects.com/afts/file/A*2vGmRrYpTjEAAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E6%B2%B3%E6%B5%81.json',
        //市级行政区海岸线.json
        'https://mdn.alipayobjects.com/afts/file/A*juI9TpBcQ74AAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E6%B5%B7%E5%B2%B8%E7%BA%BF.json',
        //市级行政区二级群列岛名.json
        'https://mdn.alipayobjects.com/afts/file/A*E4ReSqdYq-cAAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E4%BA%8C%E7%BA%A7%E7%BE%A4%E5%88%97%E5%B2%9B%E5%90%8D.json',
        //市级行政区地级市行政中心.json
        'https://mdn.alipayobjects.com/afts/file/A*I3HSQaYyQ_UAAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E5%9C%B0%E7%BA%A7%E5%B8%82%E8%A1%8C%E6%94%BF%E4%B8%AD%E5%BF%83.json',
        //市级行政区大型水库名.json
        'https://mdn.alipayobjects.com/afts/file/A*xxXKTpte0VUAAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E5%A4%A7%E5%9E%8B%E6%B0%B4%E5%BA%93%E5%90%8D.json',
       


      ];



     const result = await Promise.all(dataList.map(async (url)=> await(await fetch(url)).json()))
     const cityLayer = new PolygonLayer({
      autoFit:true
     }).source(result[6]).shape('fill')
     .scale('COLOR',{
      type:'cat',
      domain:['Y','P','G','R'],
     })
     .color('COLOR',['#f7f6c6','#fceaea','#e0e7d5','#f3e4cf']);
     
     // 陆上轮廓
     const layer2 = new PolygonLayer().source(result[9]).shape('fill').color('#b4cad7');

    // 水域 
    const waterLayer = new PolygonLayer().source(result[10]).shape('fill').color('#bcebfe');
    // 面状河流线
    const waterLayerLine = new PolygonLayer().source(result[10]).shape('line').size(0.5).color('#50aac8');

    // 线河流线
    const river_Line = new PolygonLayer().source(result[12]).shape('line').size(0.5).color('#50aac8');
    // 群岛标注图层
    const island_name = new PointLayer({
      minZoom:8
    }).source(result[1]).shape('NAME','text').size(15).color('#3b474e');

      // 河流标注图层
    const river_name = new PointLayer({minZoom:5}).source(result[2]).shape('NAME','text').size(15).color('#4aa1bd').style({
      fontWeight:800,
    });
    // 港湾标注
    const gangwan_name = new PointLayer({
      minZoom:6
    }).source(result[3]).shape('NAME','text').size(15).color('#4eaed9').style({
      fontWeight:800,
    });
        // 海岛
    const island_name1= new PointLayer({
      minZoom:7
    }).source(result[4]).shape('NAME','text').size(15).color('#3b474e').style({
      fontWeight:600,
    });

    // 县界
    const county_Line = new PolygonLayer({
      minZoom:5
    }).source(result[11]).shape('line').size(0.3).color('#a59f97');
    // 城市界
    const city_Line = new PolygonLayer().source(result[0]).shape('line').size(0.5).color('#787269');
   
        // 海岸线
    const sea_Line = new PolygonLayer().source(result[13]).shape('line').size(0.5).color('#50aac8');
  
       // 城市标注
    const cityName = new PointLayer({
      maxZoom:8,
      minZoom:5
    }).source(result[15]).shape('NAME','text').size(14).color('#000').style({
      fontWeight:800,
      textAnchor:'top',
      textOffset:[0,12]
    });

     // 城市点位

    const cityPoint = new PointLayer({
      maxZoom:7,
      minZoom:5
    }).source(result[15]).shape('city').size(5);

    // 省级市标注
    const provinceCityName = new PointLayer({
      minZoom:5,
      maxZoom:7,
    }).source(result[7]).shape('NAME','text').size(14).color('#000').style({
      fontWeight:800,
      textAnchor:'top',
      textOffset:[0,12]
    });

        // 省级市点位
    const provincePoint = new PointLayer({
      minZoom:5,
      maxZoom:7,
    }).source(result[7]).shape('province').size(5);

    // 县标注
    const countyName = new PointLayer({
      minZoom:8
    }).source(result[5]).shape('NAME','text').size(14).color('#333').style({
      fontWeight:600,
      textAnchor:'top',
      textOffset:[0,12]
    });7
    // 县点位
    const countyPoint = new PointLayer({
      minZoom:8
    }).source(result[5]).shape('county').size(5);
   
      // 县标注
    const mountainPoint = new PointLayer({
      minZoom:6
    }).source(result[8]).shape('triangle').size(6).color('#326648');

     
    // 山标注
    const mountainPoint_name = new PointLayer({
      minZoom:6
    }).source(result[8]).shape('NAME','text').size(14).color('#326648').style({
      fontWeight:800,
      textAnchor:'top',
      textOffset:[0,12]
    });




     scene.addLayer(cityLayer);
     scene.addLayer(layer2);
     scene.addLayer(waterLayer);
     scene.addLayer(waterLayerLine);
     scene.addLayer(river_Line);
     scene.addLayer(county_Line);

     scene.addLayer(city_Line);
     scene.addLayer(sea_Line);

     scene.addLayer(cityName);
     scene.addLayer(cityPoint);
     scene.addLayer(countyName);
     scene.addLayer(countyPoint);
     scene.addLayer(provinceCityName);
     scene.addLayer(provincePoint);
     scene.addLayer(island_name);
     scene.addLayer(island_name1);
     scene.addLayer(gangwan_name);
     scene.addLayer(river_name);
     scene.addLayer(mountainPoint);
     scene.addLayer(mountainPoint_name);
   
    });
  }, []);

  return (
    <div
      id="map"
      style={{
        height: '100vh',
        position: 'relative',
      }}
    />
  );
};
